<template>
    <div class="bone-padding-10">
        <el-row style="margin-top:10px; margin-bottom: 20px;">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>系统管理</el-breadcrumb-item>
                <el-breadcrumb-item>人员列表</el-breadcrumb-item>
            </el-breadcrumb>
        </el-row>
        <el-row :gutter="10">
            <el-col :span='4' v-show='!form.isShow'>
                <el-button  type="primary" size="small" @click='addEmp'>新增人员</el-button>
            </el-col>
            <el-col :span='4' v-show='form.isShow'>
                 <el-button  type="primary" size="small" @click='goBack()'>返回列表</el-button>
            </el-col>
            <el-col :span='2' v-show='!form.isShow'>
                <el-select size="small" v-model="table.deptId" clearable placeholder="请选择部门" @change='deptChange'>
                    <el-option v-for='item in table.depts' :key='item.deptId' :label="item.name" :value="item.deptId"></el-option>
                </el-select>
            </el-col>
            <el-col :span='4' v-show='!form.isShow'>
                <el-input size="small" placeholder="请输入姓名" suffix-icon="el-icon-search" v-model="table.queryKey" @keyup.enter.native="getTableData"/>
            </el-col>
            
        </el-row>
        
        <!--表格-->
        <el-row v-show='!form.isShow' class="bone-top-10">
            <el-table :data="table.tableData" border stripe style="width:100%" size="small" :highlight-current-row="true" ref="multipleTable">
                <el-table-column label="编号" prop='empId'></el-table-column>
                <el-table-column label="姓名" prop='name'></el-table-column>
                <el-table-column label="电话" prop='phoneNum'></el-table-column>
                <el-table-column label="职位" prop='post'></el-table-column>
                <el-table-column label="部门" prop='deptName'></el-table-column>
                <el-table-column label="用户名" prop='memberName'></el-table-column>
                <el-table-column label="创建时间" prop='createTime'></el-table-column>
                <el-table-column label="操作" width="180">
                    <template slot-scope='scope'>
                        <el-button @click="modifyEmp(scope.row)" type="text">修改</el-button>
                        <el-button @click="toDel(scope.row.empId)" type="text">删除</el-button>
                        <el-button v-if='!scope.row.memberId' @click="createMember(scope.row)" type="text">创建用户</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination class='bone-top-10 my-el-pagination' @current-change="handleCurrentChange" :current-page="this.table.currentPage" :page-size="this.table.pageSize" layout="total, prev, pager, next, jumper" :total="this.table.rowCount"></el-pagination>
        </el-row>

        <!--表单-->
        <el-row v-show='form.isShow' class="bone-top-10" :gutter="10">
            <el-col :span='4'>
                <el-card>
                    <div slot='header'>
                        <span>部门树</span>
                    </div>
                    <div>
                        <el-tree :data='tree.treeData' :props="tree.defaultProps" @node-click="treeNodeClick"></el-tree>
                    </div>
                </el-card>
            </el-col>
            <el-col :span='8'>
                <el-card>
                    <div slot='header'>
                        <span>{{form.formTitle}}</span>
                    </div>
                    <el-form :model='form' :rules='form.rules' ref='form' size='small' label-width="80px" label-position="right">
                        <el-form-item label='姓名' prop="name">
                            <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
                        </el-form-item>
                        <el-form-item label='电话' prop="phoneNum">
                            <el-input v-model="form.phoneNum" placeholder="请输入电话"></el-input>
                        </el-form-item>
                        <el-form-item label='部门' prop="deptName">
                            <el-input :disabled="true" v-model="form.deptName" placeholder="请选择部门"></el-input>
                        </el-form-item>
                        <el-form-item label='职位' prop="post">
                            <el-input v-model="form.post" placeholder="请输入职位"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button @click="submitForm('form')" type="primary" :disabled='form.submitDisabled'>保存</el-button>
                            <el-button @click="goBack()" type="primary">返回</el-button> 
                        </el-form-item>
                    </el-form>
                </el-card>
            </el-col>
        </el-row>

        <!--新增用户弹窗-->
        <el-dialog title="新增用户" :visible.sync="memberForm.dialogVisible"
        width='30%'>
            <div>
                <el-form :model="memberForm" :rules='memberForm.rules'
                ref='memberForm' size='small' label-position="right" label-width="80px"
                >
                    <el-form-item label='用户名' prop="username">
                        <el-input v-model="memberForm.username" placeholder="请输入用户名"></el-input>
                    </el-form-item>
                    <el-form-item label='密码' prop="password">
                        <el-input type='password' v-model="memberForm.password" placeholder="请输入密码"></el-input>
                    </el-form-item>
                    <el-form-item label='确认密码' prop="rePassword">
                        <el-input type='password' v-model="memberForm.rePassword" placeholder="请输入确认密码"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button size='small' @click="memberForm.dialogVisible = false">取 消</el-button>
                <el-button size='small' type="primary" @click="submitMember('memberForm')" :disabled="memberForm.submitDisabled">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import Http from '@/components/utils/httpUtil'
export default {
    data(){

        //自定义的再次输入密码校验
        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.memberForm.password) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };

        return {
            table: {
                queryKey: '',
                deptId: '',
                depts: [],
                tableData: [],
                pageSize: 10,
                currentPage: 1,
                rowCount: 0,
                
            },
            tree: {
                treeData: [],
                defaultProps: {
                    children: "children",
                    label: "name"
                },
            },
            form: {
                isShow: false,
                submitDisabled: false,
                isCreate: true,
                formTitle: '',
                empId: '',
                name: '',
                phoneNum: '',
                deptId: '',
                deptName: '',
                post: '',
                rules: {
                    name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
                    phoneNum: [{ required: true, message: "请输入电话", trigger: "blur" }],
                    deptName: [{ required: true, message: "请选择部门", trigger: "blur" }],
                    post: [{ required: true, message: "请输入职位", trigger: "blur" }],
                }
            },
            memberForm: {
                dialogVisible: false,
                username: '',
                password: '',
                rePassword: '',
                empId: '',
                deptId: '',
                submitDisabled: false,
                rules: {
                    username: [
                        {required:true,message: '请输入用户名',trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'}
                    ],
                    rePassword: [
                        {required: true, message: '请输入确认密码', trigger: 'blur'},
                        {validator: validatePass2, trigger: 'blur'}
                    ]
                }
            }
        }
    },
    methods: {
        //返回表格
        goBack(){
            this.form.isShow = false;
        },

        //tree节点点击
        treeNodeClick(data) {
            this.form.deptId = data.deptId
            this.form.deptName = data.name
        },

        //添加人员
        addEmp(){
            this.form.isShow = true
            this.form.isCreate = true
            this.form.submitDisabled = false
            this.form.formTitle = '新增人员'
            this.form.empId = ''
            this.form.name = ''
            this.form.phoneNum = ''
            this.form.deptId = ''
            this.form.deptName = ''
            this.form.post = ''
        },
        //修改人员
        modifyEmp(row){
            this.form.isShow = true
            this.form.isCreate = false
            this.form.submitDisabled = false
            this.form.formTitle = '修改人员'
            this.form.empId = row.empId
            this.form.name = row.name
            this.form.phoneNum = row.phoneNum
            this.form.deptId = row.deptId
            this.form.deptName = row.deptName
            this.form.post = row.post
        },
        //删除人员
        toDel(empId){
            this.$confirm('是否确定删除该人员?','提示',{
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
            .then(()=>{
                let p = {}
                let url = '/emp/delete'
                p.empId = empId;
                return Http.fetch(url,p)
            })
            .then(res=>{
                this.$message({
                    showClose: true,
                    message: res.sucMsg,
                    type: "success"
                });
                this.getTableData();
            })
            .catch(err=>{
                
                if(err!='cancel'){
                    this.$message({
                        showClose: true,
                        message: err.errMsg,
                        type: "error"
                    });
                }else{
                    console.log('err',err)
                }
            })
        },
        //创建用户
        createMember(row){
            this.memberForm.dialogVisible = true;
            this.memberForm.username = ''
            this.memberForm.password = ''
            this.memberForm.rePassword = ''
            this.memberForm.empId = row.empId
            this.memberForm.deptId = row.deptId
            this.memberForm.submitDisabled = false
        },

        //提交添加用户
        submitMember(formName){
            this.$refs[formName].validate(valid=>{
                if(valid){
                    this.memberForm.submitDisabled = true
                    let url = '/member/add'
                    let p = {}
                    p.username = this.memberForm.username
                    p.password = this.memberForm.password
                    p.empId = this.memberForm.empId
                    p.deptId = this.memberForm.deptId
                    Http.fetch(url,p)
                    .then(res=>{
                        this.$message({
                            showClose: true,
                            message: res.sucMsg,
                            type: "success"
                        });
                        this.memberForm.submitDisabled = false
                        this.memberForm.dialogVisible = false
                        this.getTableData()
                    })
                    .catch(err=>{
                        this.memberForm.submitDisabled = false;
                        this.$message({
                            showClose: true,
                            message: err.errMsg,
                            type: "error"
                        });
                    })
                }
            })
        },

        //部门下拉选择变化
        deptChange(){
            this.getTableData();
        },

        //table翻页
        handleCurrentChange(val) {
            this.table.currentPage = val;
            this.getTableData();
        },

        //加载表格数据
        getTableData(){
            let p = {};
            p.start = (this.table.currentPage - 1) * this.table.pageSize;
            p.num = this.table.pageSize;
            p.key = this.table.queryKey;
            p.deptId = this.table.deptId;
            Http.fetch('/emp/listQuery', p)
                .then(res => {
                    this.table.tableData = res.data.rows;
                    this.table.rowCount = res.data.total;
                })
        },

        //构建部门树
        createTree(data,pid){
            pid = pid || 0;
            let list = [];
            data.map(item=>{
                if(item.pid == pid){
                    item.children = this.createTree(data,item.deptId);
                    list.push(item)
                }
            })
            return list;
        },
        //获取部门树
        getTreeData(){
            let p = {};
            Http.fetch('/dept/listTree',p)
            .then(res=>{
                let pid = 0
                if(localStorage.deptPid){
                    pid = localStorage.deptPid
                }
                let tdata = this.createTree(res.data,pid);
                this.tree.treeData = tdata;
                this.table.depts = res.data;
            })
        },


        //提交表单
        submitForm(formName){
            this.$refs[formName].validate(valid => {
                if(valid){
                    this.form.submitDisabled = true;
                    let url = ''
                    let p = {}
                    if(this.form.isCreate){
                        url = '/emp/add'
                    }else{
                        url = '/emp/modify'
                        p.empId = this.form.empId
                    }
                    p.name = this.form.name;
                    p.phoneNum = this.form.phoneNum
                    p.deptId = this.form.deptId
                    p.post = this.form.post
                    Http.fetch(url,p)
                    .then(res => {
                        this.$message({
                            showClose: true,
                            message: res.sucMsg,
                            type: "success"
                        });
                        this.form.submitDisabled = false;
                        this.form.isShow = false;
                        this.getTableData();
                    })
                    .catch(err => {
                        this.form.submitDisabled = false;
                        this.$message({
                            showClose: true,
                            message: err.errMsg,
                            type: "error"
                        });
                    })
                }
            });
        },

        
    },
    mounted(){
        this.getTableData()
        this.getTreeData()
    }
}
</script>

<style scoped>

</style>
